<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test13</title>
	</head>
<body>
<style>
	body
	{
		background-color: black;
	}
	#c1
	{
		stroke-dasharray: 130;
		stroke-dashoffset: 130;
		transition: 2s all;
	}
	#d1d1
	{
		position: absolute;
		left: 470px;
		top: 450px;
		font-size: 80px;
		color: black;
		text-shadow: 0px 0px 2px aqua;
		transition: 1s;
		transition-delay: 1.5s;
	}
	#d1:hover #c1
	{
		stroke-dashoffset: 0;
	}
	#d1:hover #d1d1
	{
		color: aqua;
		text-shadow: 0px 0px 0px aqua;
	}
</style>
<div id="d1">
	<div id="d1d1"><ruby>淦<rp>(</rp><rt>Gàn</rt><rp>)</rp></ruby></div>
	<svg id='svg1' height='1000' width='1000' viewBox='0 0 100 100'>
   <circle id='c1' cx="50" cy="50" r="20" stroke="aqua" stroke-width="2" stroke-linecap='round' fill="none" />
</svg> 
</div>
</body>
</html>